<template>
  <div class="correcing-work-div">
      <div>

        <el-tooltip class="item" effect="dark" content="返回" placement="top">
        <div class="course-back-btn">
            <router-link to="/course/show/info" class="route-link">
            <i class="el-icon-back"></i></router-link>
        </div>
        </el-tooltip>
      </div>

      <div style="display:flex">
        <el-button size="medium">查看未批改(默认)</el-button>
        <el-button size="medium">查看已批改</el-button>
        <el-button size="medium">全部查询</el-button>

        <div style=" margin-left:11%;">
          
          <el-input placeholder="请输入内容" v-model="searchName" class="input-with-select">
            <el-select v-model="searchType" placeholder="请选择" slot="prepend">
              <el-option label="班级名" :value="1"></el-option>
              <el-option label="学生名" :value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>

      <div class="work-card-div">
          <el-card class="work-card" v-for="record in records" :key="record.wsId">
              <div slot="header" class="work-card-header">
                  <span>{{record.stuNumber}}</span> <span>- {{record.wsStuName}}</span> <span>- {{record.className}}</span>
                  
                  <div class="work-card-score">
                    <div class="work-card-score-left">

                      <el-slider v-model="record.score" :min="1" :step="0.5" :max="workInfo.workScore"></el-slider>
                    </div>

                    <el-button type="primary" 
                    @click="correctWork2Record(record.wsId, record.score)"
                    icon="el-icon-check" circle></el-button>
                  </div>

              </div>

              <div class="work-card-content">

                  <div v-if="record.wsType == 1" class="ql-snow" >
                      <div class="ql-editor" v-html="record.wsText"></div>
                  </div>

                  <div v-if="record.wsType == 2">
                        <el-tooltip class="item" effect="dark" content="点击放大" placement="top">
                        <el-image  :src="record.wsFileUrl" 
                        alt="我的作业" 
                        class="work-card-content-img"
                        :preview-src-list="[record.wsFileUrl]"
                        >
                        </el-image>
                        </el-tooltip>
                  </div>

              </div>

              <!-- <div class="work-card-content">
                {{i == 1?'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx':''}}
                <div v-if="i == 2">
                  <el-tooltip class="item" effect="dark" content="点击放大" placement="top">
                  <el-image  :src="workImgUrl" 
                  alt="我的作业" 
                  class="work-card-content-img"
                  :preview-src-list="srcList"
                  >
                  </el-image>
                  </el-tooltip>
                </div>
              </div> -->

              
          </el-card>
          
      </div>

  </div>
</template>

<script>
import * as API from '../../api/work/index'

export default {
  //  props:['courseId'],
  data() {
    return {
      workInfo:{},
      workId:'',
      content:"<p>这是我的答案，你看看这个格式还满意不？</p><p>需要换行吗？</p><p><br></p><p>我再换行。。。。。。。。。。。。。。。。。。不够长？我再试试------------------------</p><p>再换行</p><p>好！结束！</p>",
      value1: 2,
      maxScore:10,
      searchType: 1,
      searchName: "",
      records:[],
      workType:1,// 1是文本，2是图片，3是word
      // workImgUrl: require('../../../public/img/mywork.png'),
      // srcList:[
      //   require('../../../public/img/mywork.png'),
      // ]
    }
  },
  methods: {
    getWorkInfo(workId) {
        if(workId  == '') return
        console.log(workId)
        API.getWorkRecords(workId).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.records = res.data.records
          }else {
            this.$message.error("网络不太好， err：" + res.data.error )
          }
        }).catch(err => {
          this.$message.error('网络有问题，err:' + err);
        })
    },
    correctWork2Record(wsId, score) {
      // console.log(wsId +"::" + score)
      API.correctWorkSubmitRecord(wsId, score).then(res => {
        if(res.code == 200) {
              this.$message({
                message: '批改成功，分数为: ' + score,
                type: 'success'
            });
        }else {
          this.$message.error("批改失败")
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('网络有问题，err:' + err);
      })
    }
  },
  mounted() {
    console.log(this.$route.params.workInfo )
    if (this.$route.params.workInfo == undefined) {
      this.$router.push( {
        name:"CourseInfo"
      })
      return
    }else {
      this.workInfo = this.$route.params.workInfo
      this.workId = this.$route.params.workInfo.workId
      this.getWorkInfo(this.workId)
    }
  }
}
</script>

<style>
.correcing-work-div {
  /* margin: 2%; */
  width: 96%;  

}

.work-card-div {
  margin-top: 2%;
  width: 96%;
  /* min-height: 600px; */

  /* display: flex;
  justify-content: space-between; */
  columns: 2;
  column-gap: 60px;
  column-fill: auto;
}

/* .work-card-colum {
  display: flex;
  flex-direction: column;
} */

.work-card {
  break-inside: avoid;
  transform: translateZ(0);

  margin-bottom: 2%;
  width: 400px;
  min-height: 270px;

  word-wrap: break-word;
  word-break: normal;
}

.el-select .el-input {
    width: 130px;
}

.work-card-score {
  display: flex;
  justify-content: space-between;
}

.work-card-score-left {
  flex: 0.9;
}

/* .work-card-content {
  width: 100%;
} */

.work-card-content .ql-editor {
  height: auto;
}
.work-card-content-img {
  width: 100%;
}
 

</style>